import React, { useEffect, useState } from 'react';
import { Drawer } from "antd";
import IframePage from './iframePage';

const ObsDetail = ({ info, visible, setVisible }) => {
    return (
        <Drawer 
            className="drawer-table-columns create-field"
            title={'查看监控信息'}
            placement={'right'}
            width={1200}
            onClose={() => { setVisible(false) }}
            visible={visible}
            footer={null}
        >
            <div className="detail-title">
                实例名称/ID ： {info?.label || '-'}/{info?.uuid || '-'}
            </div> 
            <div className="detail-iframe" style={{height: 'calc(100% - 20px)'}}>
                <IframePage
                    type={info?.monitorType}
                    uuid={info?.monitorUuid||info?.uuid}
                />
            </div>
        </Drawer>
    );
};

export default ObsDetail;
